<template>
  <div class="order-detail-popup">
    <popup
      ref="popupRef"
      title="订单-查看详情"
      :async="true"
      width="60%"
      @confirm="handleClose"
      :clickModalClose="true"
      :showFooter="false"
    >
      <el-descriptions title="" :column="3">
        <el-descriptions-item label="订单编号:">{{
          dataSource.orderNo
        }}</el-descriptions-item>
        <el-descriptions-item label="订单状态:">{{
          dataSource.statusTranslate
        }}</el-descriptions-item>
		<el-descriptions-item label="详细地址:">{{
		  dataSource.addressDetail
		}}</el-descriptions-item>
        <el-descriptions-item label="配送点:">{{
          dataSource.mansionName
        }}</el-descriptions-item>
        <el-descriptions-item label="楼层:" :span="2">{{
          dataSource.floor
        }}</el-descriptions-item>
        <el-descriptions-item label="称呼:">{{
          dataSource.nickName
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号:" :span="2">{{
          dataSource.mobile
        }}</el-descriptions-item>
        <el-descriptions-item label="套餐总金额:">{{
          dataSource.totalAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="优惠金额:">{{
          dataSource.couponAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="实际支付:">{{
          dataSource.actualAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="送达日期:">{{
          dataSource.deliveryTimeStr
        }}</el-descriptions-item>
        <el-descriptions-item label="支付日期:">{{
          dataSource.payTimeStr
        }}</el-descriptions-item>
        <el-descriptions-item label="用户ID:">{{
          dataSource.userSn
        }}</el-descriptions-item>

        <el-descriptions-item
          :span="3"
          label="套餐信息"
          class-name="descriptions-wrap"
        >
          <el-table
            size="large"
            v-loading="isLoading"
            :data="mealList"
            max-height="250"
          >
            <el-table-column label="套餐名称" prop="mealName" min-width="20%" />
            <el-table-column label="数量" prop="mealNumber" min-width="20%" />
            <el-table-column label="单价" prop="unitPrice" min-width="20%" />
            <el-table-column label="小计" prop="total" min-width="20%" />
          </el-table>
          <!-- <div class="flex justify-end mt-4">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              />
            </div> -->
        </el-descriptions-item>
      </el-descriptions>
    </popup>
  </div>
</template>
<script lang="ts" setup>
import Popup from "@/components/popup/index.vue";
import feedback from "@/utils/feedback";
import { getOrderDetail } from "@/api/admin/index";

const emit = defineEmits(["success", "close"]);
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
const isLoading = ref(false);
const dataSource = ref({
  orderNo: "",
  status: "",
  statusTranslate: "",
  mansionName: "",
  floor: "",
  totalAmount: "",
  couponAmount: "",
  actualAmount: "",
  deliveryTimeStr: "",
  payTimeStr: "",
  userSn: "",
  nickName: "",
  mobile: "",
});
const mealList = ref([]);

const open = (type = "add") => {
  isLoading.value = true;
  mode.value = type;
  popupRef.value?.open();
};

const getDetail = async (id: any) => {
  const data = await getOrderDetail({
    id,
  });
  isLoading.value = false;
  dataSource.value = data;
  mealList.value = data.mealList.map(
    ({ mealName, mealNumber, unitPrice }: any) => ({
      mealName,
      mealNumber,
      unitPrice,
      total: mealNumber * unitPrice,
    })
  );
};

const handleClose = () => {
  emit("close");
};
defineExpose({
  open,
  getDetail,
});
</script>

<style lang="scss">
.descriptions-wrap {
  display: block;
}
</style>
